<template>
  <div class="GHBJ_Map">
    <transition name="fade" mode="out-in">
      <component :is="component" :statisticData="statisticData"></component>
    </transition>
  </div>
</template>

<script setup lang="ts">
import useMapStore from '@/store/modules/map';
// const SZXC = defineAsyncComponent(() => import('./SZXC.vue'));
import useUserStore from '@/store/modules/user';
import SZXC from './SZXC.vue';

const userStore = useUserStore();

const component = computed(() => {
  useMapStore().SetIscountry(false);
  return SZXC;
});

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const $szxcapi = (proxy as any)?.$szxcapi;
const statisticData = ref({});
const country = ref(useMapStore().szxcCountry);

const init = async () => {
  // loading.value = true;
  const params = {
    'ssc': country.value
  };
  if (userStore.dept.deptName) {
    params['ssc'] = userStore.dept.deptId;
  }
  const res = await $szxcapi.jcxx(params);
  let data = res.data || {};
  if (data.mlxc) {
    data.mlxc = data.mlxc.split(/[,]/);
  }
  if (data.shry) {
    data.shry = data.shry.split(/[；;]/);
  }
  statisticData.value = data || {};
};

onMounted(async () => {
  await nextTick();
  init();
});
watch(
  () => useMapStore().szxcCountry,
  (val) => {
    country.value = val;
    init();
  }
);
</script>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.4s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
